<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script></script>
<script>
import E from "wangeditor";

import ImageExtends from "./imageExtends/index.js";
// import LinkExtends from './linkExtends/index.js'
export default {
    components: {},
    computed: {
        containerStyle() {
            let _s = ``;
            _s += `height:${this.height}px;`;
            return _s;
        },
    },

    props: {
        // 使用者window实例 必定义
        appWindow: {
            type: Object,
            default: null,
        },

        // 接口列表
        apiConfig: {
            type: Object,
            default: {
                // 素材配置
                fileConfig: {
                    url: "mall-site-portal/album-info/getFileConfig",
                },
                // 素材创建
                createSubmit: {
                    url: "mall-site-portal/album-info/create",
                },
                // 分组列表
                albumList: {
                    url: "mall-site-portal/album/listAll",
                },
                // 分组添加
                albumAdd: {
                    url: "mall-site-portal/album/create",
                },
                // 分组删除
                albumDel: {
                    url: "mall-site-portal/album/delete",
                },
                // 分组编辑
                albumEdit: {
                    url: "mall-site-portal/album/update",
                },
                // 数据列表
                dataList: {
                    url: "mall-site-portal/album-info/list",
                },
                // 数据删除
                dataDel: {
                    url: "mall-site-portal/album-info/delete",
                },
                // 数据修改
                dataEdit: {
                    url: "mall-site-portal/album-info/update",
                },
                // 数据同步
                dataSync: {
                    url: "mall-site-portal/album-info/materialUpload",
                },
            },
        },
        value: {
            type: String,
            default: "",
        },
        height: {
            type: Number,
            default: 200,
        },
    },

    data() {
        return {
            // quill: null,
            content: "",
        };
    },
    methods: {
        initE() {
            const editor = new E("#container");
            editor.appWindow = this.appWindow;
            editor.apiConfig = this.apiConfig;
            // 提示
            editor.config.customAlert = (s, t) => {
                switch (t) {
                    case "success":
                        this.$vFN.Tools.messageError(s);
                        break;
                    case "info":
                        this.$vFN.Tools.messageError(s);
                        break;
                    case "warning":
                        this.$vFN.Tools.messageError(s);
                        break;
                    case "error":
                        this.$vFN.Tools.messageError(s);
                        break;
                    default:
                        this.$vFN.Tools.messageError(s);
                        break;
                }
            };
            // 配置行高
            editor.config.lineHeights = ["1", "1.15", "1.6", "2", "2.5", "3"];
            // 字号
            editor.config.fontSizes = {
                "x-small": {
                    name: "10px",
                    value: "1",
                },
                small: {
                    name: "13px",
                    value: "2",
                },
                normal: {
                    name: "16px",
                    value: "3",
                },
                large: {
                    name: "18px",
                    value: "4",
                },
                "x-large": {
                    name: "24px",
                    value: "5",
                },
                "xx-large": {
                    name: "32px",
                    value: "6",
                },
                "xxx-large": {
                    name: "48px",
                    value: "7",
                },
            };
            // zindex
            editor.config.zIndex = 1;
            // 设置编辑区域高度为 500px
            editor.config.height = this.height;
            // 配置 onchange 回调函数
            editor.config.onchange = (html) => {
                this.$emit("input", html);
                this.content = html;
            };

            // 注册菜单
            E.registerMenu("ImageExtends", ImageExtends);
            // E.registerMenu('LinkExtends', LinkExtends)

            // 配置菜单栏，删减菜单，调整顺序
            editor.config.menus = [
                "head",
                "bold",
                "fontSize",
                // 'fontName',
                "italic",
                "underline",
                "strikeThrough",
                "indent",
                "lineHeight",
                "foreColor",
                "backColor",
                "link",
                "list",
                // 'todo',
                "justify",
                "quote",
                // 'emoticon',
                "image",
                // 'video',
                // 'table',
                // 'code',
                "splitLine",
                "undo",
                "redo",
            ];

            // 关闭全屏
            editor.config.showFullScreen = false;

            editor.create();

            let _content = this.value;
            if (!_content) {
                _content = "";
            }
            this.content = _content;
            editor.txt.html(_content);
        },
        getSrc(attrs) {
            let _src = "";
            attrs.forEach((item) => {
                if (item.name == src) {
                    _src = item.value;
                }
            });
        },
        returnResources(json, data) {
            if (!data) {
                data = {
                    img: [],
                    audio: [],
                    video: [],
                };
            }
            json.forEach((item) => {
                if (item.tag == img) {
                    data.img = this.getSrc(item.attrs);
                }
                if (!this.$vFN.Utils.isEmpty(item.children)) {
                    data = this.returnResources(item.children, data);
                }
            });
            return data;
        },
    },

    mounted() {
        this.initE();
    },
    beforeCreate() {},
};
</script>